<!-- 地址管理 -->
<template>
  <div class="w-full h-full px-4 pt-3 pb-2">
    <Box class="w-full h-full" title="地址管理" @footer-height="getFooterHeight">
      <template #headerBtns>
        <div class="w-full h-full pl-8 flex gap-4 items-center">
          <a-button size="small" type="primary" @click="openModal">新增地址</a-button>
        </div>
      </template>
      <div class="w-full h-full">
        <a-table
          :columns="columns"
          :data-source="tableData"
          row-key="id"
          size="small"
          :pagination="false"
          :scroll="{ y: tableHeight }"
          @change="handleTableChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <a-button type="link" @click="openModal(record)">编辑</a-button>
              <a-popconfirm title="确定删除吗?" @confirm="deleteBatch(record.id)">
                <a-button type="link">删除</a-button>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
      </div>
    </Box>
    <a-modal
      v-model:visible="modalVisible"
      :title="modalTitle"
      :ok-button-props="okButtonProps"
      :destroy-on-close="true"
      :cancel-button-props="cancelButtonProps"
      @ok="handleOk"
    >
      <a-form
        ref="modalFormRef"
        :model="modalForm"
        :label-col="{ style: { width: '100px' } }"
        :wrapper-col="{ span: 18 }"
        autocomplete="off"
        :rules="rules"
      >
        <a-form-item
          v-for="item in modalItem"
          :key="item.name"
          :label="item.label"
          :name="item.name"
        >
          <a-input
            v-if="item.type === 'input'"
            v-model:value="modalForm[item.name]"
            style="width: 320px"
          />
          <a-switch v-if="item.type === 'switch'" v-model:checked="modalForm[item.name]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import Box from '@/components/box/Index.vue'
import { ref, onMounted, nextTick } from 'vue'
import {
  queryAddressListApi,
  addAddressApi,
  updateAddressApi,
  deleteAddressApi
} from '@/api/address'

import { okButtonProps, cancelButtonProps } from '@/assets/js'
import { cloneDeep } from 'lodash'

const tableHeight = ref(0)
const getFooterHeight = (val) => {
  tableHeight.value = val
}

const columns = [
  {
    title: '昵称',
    dataIndex: 'name',
    key: 'name',
    width: 100
  },
  {
    title: '电话号码',
    dataIndex: 'phone',
    key: 'phone'
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: '是否为默认地址',
    dataIndex: 'defaultAddress',
    key: 'defaultAddress',
    customRender: ({ text }) => {
      return text ? '是' : '否'
    }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 140
  }
].map((item) => {
  item.align = 'center'
  return item
})
const tableData = ref([])
const getTableData = async () => {
  const { result } = await queryAddressListApi()
  tableData.value = result
}

onMounted(async () => {
  getTableData()
})

// 新增 修改对话框
const modalVisible = ref(false)
let modalTitle = ''
const modalForm = ref({})
const modalFormRef = ref()
const openModal = (record) => {
  modalForm.value = { defaultAddress: false }
  if (record.id) {
    modalTitle = '编辑'
    // 备注一下
    modalForm.value = cloneDeep(record)
  } else {
    modalTitle = '新增'
  }
  modalVisible.value = true
  nextTick(() => {
    modalFormRef.value.resetFields()
  })
}

const handleOk = () => {
  modalFormRef.value.validateFields().then(async () => {
    if (modalForm.value?.id) {
      //修改
      await updateAddressApi(modalForm.value)
    } else {
      // 新增
      await addAddressApi(modalForm.value)
    }
    modalVisible.value = false
    getTableData()
  })
}
const modalItem = ref([
  {
    type: 'input',
    label: '昵称',
    name: 'name'
  },
  {
    type: 'input',
    label: '电话',
    name: 'phone'
  },
  {
    type: 'input',
    label: '地址',
    name: 'address'
  },
  {
    type: 'switch',
    label: '默认地址',
    name: 'defaultAddress'
  }
])
const rules = {
  name: [
    {
      required: true,
      message: '请输入昵称',
      trigger: 'blur'
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入电话',
      trigger: 'blur'
    }
  ],
  address: [
    {
      required: true,
      message: '请输入地址',
      trigger: 'blur'
    }
  ]
}

// 操作方法
// 批量删除
const deleteBatch = async (ids) => {
  await deleteAddressApi({ id: ids })
  getTableData()
}
</script>

<style lang="less" scoped>
.icon {
  width: 10px;
  height: 10px;
  box-shadow: 1px 2px 2px 0px rgba(57, 57, 64, 0.13);
  border-radius: 50%;
}
.cell-bottom-border {
  border-bottom: 1px solid #f0f0f0;
}
</style>
